define(["utils","base"],function(utils,baseClass){

  var HBoxColumn = function(config){
      var _this = this;
      HBoxColumn.baseConstructor.call(this,config);
      this.id = config.id;
      var style = this.config.style||{};
      this.$el.addClass("yy-hbox-column");
      this.CellDomInner = $("<div class='yy-hbox-cell-inner'></div>");
      if(style.verticalAlign){

      }else{

        if(utils.isNeedReLayout()){
          this.$$childrenWrapper = this.CellDomInner;
          this.$el.append(this.CellDomInner);
          window.setTimeout(function(){
            var width = _this.$el.width();
            var height = _this.$el.height();
            _this.CellDomInner.css({"width":width+"px",height:height+"px"});
          },200);
          this.pageview.pageManager.regeistWindowResize(this.id,function(){
            _this.CellDomInner.css({"width":"auto",height:"auto"});
            window.setTimeout(function(){
              var width = _this.$el.width();
              var height = _this.$el.height();
              _this.CellDomInner.css({"width":width+"px",height:height+"px"});
            },200);
          });

        }

      }



      this.initLayout(this.datasource,null,this.rowInstance);

  }

  utils.extendClass(HBoxColumn,baseClass);

    var Component = function(config){
        var _this = this;
        Component.baseConstructor.call(this,config);
        this.$el.addClass("yy-hbox");
        this.components=[];
        this.layout();
    }

    utils.extendClass(Component,baseClass);

    Component.prototype.layout = function(){
      var items = this.config.items||[];
      for(var i=0,j= items.length;i<j;i++){
        var itemData = items[i];
        var hoboxColumn =  new HBoxColumn({
          type:"hboxcolumn",
          root:itemData.root,
          style:itemData.style,
          id:this.id+""+i,
          $$datasource:this.datasource,
          $$parent:this,
          $$pageview:this.pageview,
          $$rowInstance:this.$$rowInstance
        });
        this.components.push(hoboxColumn);
        this.$el.append(hoboxColumn.$el);
      }

    };

    return Component;
});
